<template>
  <div class="login">
    <div class='bd'>
        <h1>登录</h1>
        <form @submit.prevent="showData">
            <!-- 给表单注册提交事件 .prevent 就实现了阻止表单的默认提交 -->
            昵称:
            <input type="text" v-model="username">
            密码:
            <input type="password" v-model="password">
            <!-- 性别: -->
            <!-- v-model是同一个名称就会互斥 需要value属性 -->
            <!-- <input type="radio" v-model="sex" value="male"> 男
            <input type="radio" v-model="sex" value="famale"> 女
            爱好:
            <input type="checked" v-model="book"/> 看书
            <input type="checked" v-model="sleep"/> 睡觉
            地址:
            <select v-model="city">
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="gz">广州</option>
                <option value="sz">深圳</option>
            </select> -->
            <input type="submit" value="提交">
        </form>
    </div>
    
  </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import Component from 'vue-class-component';
    import axios from 'axios';
    import store from '../store';

    export default Vue.extend({
        data() {
            return {
                msg: 'msg',
                errors: [],
                username: '',
                password: '',
            };
        },

        created() {
            // this.city = 'sz';
        },

        methods: {
            showData(e: any) {
                if (!this.username) {
                    // this.errors.push("username required.");
                }
                if (!this.password) {
                    // this.errors.push('password required.');
                }

                this.login(this.username, this.password);
                e.preventDefault();
                console.log(e);
            },

            login(username: string, password: string) {
                const params = new URLSearchParams();
                params.append('username', username);
                params.append('password', password);
                axios.post('http://localhost:3000/api/admin/login', params, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        // 'Content-Type': 'application/json',
                    },
                })
                .then((res) => {
                    console.log(res);
                    if (res.data.returnCode === 200) {
                        // console.log('store:::', store.state.user);
                        // store.state.user.commit('setToken', res.data.token);
                        // this.$router.push('/');
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
            },
        },
    });
</script>

<style scoped>
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bd{
    width: 600px;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
